<template>
  <el-select v-model="accountTypeIds" placeholder="请选择账号类型" clearable multiple class="!w-240px">
    <el-option v-for="accountType in accountTypeList" :key="accountType.id" :label="accountType.name" :value="accountType.id" />
  </el-select>
  <el-button
    v-if="showAdd"
    type="primary"
    class="ml-2"
    link
    @click="openForm('create')"
    v-hasPermi="['member:tag:create']"
  >
    新增类型
  </el-button>

  <!-- 表单弹窗：添加 -->
  <AccountTypeForm ref="formRef" @success="getList" />
</template>

<script lang="ts" setup>
import AccountTypeForm from "@/views/member/accounttype/AccountTypeForm.vue";
// 只导入实际需要的内容
import { AccountTypeApi } from "@/api/member/accounttype";

defineOptions({ name: 'MemberTagSelect' })

const props = defineProps({
  /** 下拉框选中值 **/
  modelValue: {
    type: Array,
    default: undefined
  },
  /** 是否显示“新增标签”按钮 **/
  showAdd: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue'])
defineExpose({
  showAdd: props.showAdd
})

const accountTypeIds = computed({
  get() {
    return props.modelValue
  },
  set(value: any) {
    emit('update:modelValue', value)
  }
})

// 修正类型定义，使用正确的接口
const accountTypeList = ref<Array<{ id: number; name: string }>>([])

// 修正API调用，使用导入的AccountTypeApi
const getList = async () => {
  // 根据实际接口调整，这里假设获取列表的接口是getAccountTypePage
  const response = await AccountTypeApi.getAccountTypePage({})
  accountTypeList.value = response.data.list || []
}

/** 添加用户标签表单弹框 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 初始化 */
onMounted(() => {
  getList()
})
</script>
